<template>
  <div class="views-container">
    <div class="crud-group">
      <el-input
        v-model="sourceParamsForm.taskDate"
        type="text"
        placeholder="请输入任务日期"
        clearable
      />
      <el-input
        v-model="sourceParamsForm.sourceName"
        type="text"
        placeholder="请输入源名称"
        clearable
      />
      <el-select
        v-model="sourceParamsForm.taskState"
        placeholder="状态"
        clearable
      >
        <el-option
          v-for="item in sourceStateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="sourceParamsForm.hotStandbyTime"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :default-time="['00:00:00','23:59:59']"
        clearable
      />

      <div style="display: flex">
        <el-button
          type="success"
          icon="el-icon-search"
          @click="SourceDataSearch"
        >
          搜索
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-refresh-left"
          @click="resetSourceData"
        >
          重置
        </el-button>
      </div>
    </div>

    <el-table
      ref="table"
      v-loading="isSourceLoading"
      :data="sourceData"
      border
    >
      <el-table-column
        label="任务日期"
        prop="taskDate"
        sortable
        fixed
        min-width="95px"
      />
      <el-table-column
        label="源名称"
        sortable
        prop="sourceName"
        min-width="90px"
      />
      <el-table-column
        label="同步范围"
        width="260"
        sortable
      >
        <template slot-scope="scope">
          <span>{{
            (!scope.row.syncRangeStartTime || !scope.row.syncRangeEndTime)
              ? ''
              :
                (scope.row.syncRangeStartTime +
                  "--" +
                  scope.row.syncRangeEndTime)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="表数量/HDFS数"
        prop="tableHdfsNumber"
        sortable
        min-width="130px"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ 
              scope.row.tableHdfsNumber
                ? scope.row.tableHdfsNumber 
                : '0/0' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="源总量"
        prop="sourceCountNumber"
        sortable
        min-width="90px"
        show-overflow-tooltip
      />
      <el-table-column
        label="目标总量"
        prop="targetCountNumber"
        sortable
        min-width="95px"
        show-overflow-tooltip
      />
      <el-table-column
        label="状态"
        prop="taskState"
        min-width="95px"
        sortable
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.taskState === '已完成'
              ? 'success'
              : scope.row.taskState === '失败'
                ? 'danger'
                : scope.row.taskState === '进行中'
                  ? ''
                  : 'warning'
            "
          >
            {{ scope.row.taskState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="开始时间"
        prop="hotStandbyStaTime"
        sortable
        min-width="95px"
        show-overflow-tooltip
      />
      <el-table-column
        label="结束时间"
        prop="hotStandbyEndTime"
        sortable
        min-width="95px"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ (scope.row.taskState && scope.row.taskState === '进行中') ? '' : scope.row.hotStandbyEndTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="热备用时"
        prop="hotStandbyTime"
        min-width="100px"
        sortable
      >
        <template slot-scope="scope">
          <a
            style="color: dodgerblue"
            @click="() => {
              sourceTimeSpendData = scope.row.hotStandbyTimeData;
              sourceTimeSpendDialogVisible = true;
            }
            "
          >{{ scope.row.hotStandbyTime }}</a>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="表信息"
        min-width="80"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="() => {
              selectedSourceId = scope.row.id;
              dialogVisible = true;
              getTableData();
            }
            "
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        :current-page="sourceParamsForm.current"
        :page-size="sourceParamsForm.size"
        layout="prev, pager, next,sizes,total"
        :total="sourceParamsFormtotal"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
      />
    </div>

    <time-spend-dialog
      :dialog-visible="sourceTimeSpendDialogVisible"
      :hot-standby-time-data="sourceTimeSpendData"
      @close="sourceTimeSpendDialogVisible = false"
    />

    <el-dialog
      center
      title="表日志"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="dialogVisibleclose"
    >
      <div>
        <div class="crud-group">
          <el-input
            v-model="tableParamsForm.dbTbName"
            type="text"
            placeholder="请输入表名称"
            clearable
          />
          <el-select
            v-model="tableParamsForm.syncWay"
            placeholder="同步方式"
            clearable
          >
            <el-option
              v-for="item in tableSyncWayOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="tableParamsForm.taskState"
            placeholder="状态"
            clearable
          >
            <el-option
              v-for="item in tableStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- <el-date-picker
            v-model="tableParamsForm.hotStandbyTime"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="['00:00:00','23:59:59']"
            clearable
          /> -->
          <div>
            <el-button
              type="success"
              icon="el-icon-search"
              @click="TableDataSearch"
            >
              搜索
            </el-button>
            <el-button
              type="warning"
              icon="el-icon-refresh-left"
              @click="resetTableData"
            >
              重置
            </el-button>
            <el-button
              type="warning"
              icon="el-icon-refresh-left"
              @click="rerun"
            >
              重跑
            </el-button>
          </div>
        </div>

      </div>

      <el-table
        ref="table"
        v-loading="isTableLoading"
        :data="tableData"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          label="源名称"
          prop="sourceName"
        />
        <el-table-column
          label="表名称"
          prop="dbTbName"
          sortable
        />
        <el-table-column
          label="同步方式"
          prop="syncWay"
          sortable
        />
        <el-table-column
          label="源总量"
          prop="sourceCountNumber"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          label="目标总量"
          prop="targetCountNumber"
          sortable
          show-overflow-tooltip
        />
        <el-table-column
          label="耗时"
          prop="hotStandbyTime"
          sortable
        >
          <template slot-scope="scope">
            <a
              style="color: dodgerblue"
              @click="() => {
                tableTimeSpendData = scope.row.hotStandbyTimeData;
                tableTimeSpendDialogVisible = true;
              }
              "
            >{{ scope.row.hotStandbyTime }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="taskState"
          sortable
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.taskState === '成功'
                ? 'success'
                : scope.row.taskState === '进行中'
                  ? ''
                  : scope.row.taskState === '待执行'
                    ? 'warning'
                    : 'danger'
              "
            >{{ scope.row.taskState }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="详情">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="() => {
                detailsDialogVisible = true;
                getTableDetail(scope.row.logPath);
              }
              "
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <!--分页组件-->
        <el-pagination
          :current-page="tableParamsForm.current"
          :page-size="tableParamsForm.size"
          layout="prev, pager, next,sizes,total"
          :total="tableParamsFormtotal"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
        <!-- <el-pagination
            :current-page="tableParamsForm.current"
            :page-size="tableParamsForm.size"
            layout="prev, pager, next,sizes,total"
            :total="tableParamsFormtotal"
            @current-change="getTableData"
          /> -->
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          type="primary"
          @click="dialogVisibleclose"
        >关闭</el-button>
      </span>

      <table-details-dialog
        :append-to-body="true"
        :dialog-visible="detailsDialogVisible"
        :details="tableDetail"
        @close="detailsDialogVisible = false"
      />

      <time-spend-dialog
        :append-to-body="true"
        :dialog-visible="tableTimeSpendDialogVisible"
        :hot-standby-time-data="tableTimeSpendData"
        @close="tableTimeSpendDialogVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import logAnalysisApi from '@/api/logAnalysis'
import TimeSpendDialog from './components/TimeSpendDialog.vue'
import TableDetailsDialog from './components/TableDetailsDialog.vue'
import dateUtils from '@/utils/date'

export default {
  components: {
    TimeSpendDialog,
    TableDetailsDialog
  },
  data() {
    return {
      isSourceLoading: false,
      isTableLoading: false,
      sourceParamsFormtotal: 0,
      tableParamsFormtotal: 0,
      sourceParamsForm: {
        sourceName: '',
        taskDate: '',
        taskState: '',
        hotStandbyTime: [
          new Date(new Date().setHours(0, 0, 0, 0)),
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
        ],
        current: 1,
        size: 20
      },
      tableParamsForm: {
        dbTbName: '',
        taskState: '',
        syncWay: '',
        current: 1,
        size: 10,
        hotStandbyTime: ''
      },
      sourceStateOptions: [
        {
          label: '已完成',
          value: '已完成'
        },
        // {
        //   label: '待执行',
        //   value: '待执行'
        // },
        {
          label: '进行中',
          value: '进行中'
        },
        {
          label: '失败',
          value: '失败'
        },
        {
          label: '重跑中',
          value: '重跑中'
        }
      ],
      tableStateOptions: [
        {
          label: '失败',
          value: '失败'
        },
        {
          label: '同步失败',
          value: '同步失败'
        },
        {
          label: '刷新失败',
          value: '刷新失败'
        },
        {
          label: '删除失败',
          value: '删除失败'
        },
        {
          label: '比对失败',
          value: '比对失败'
        },
        {
          label: '成功',
          value: '成功'
        },
        {
          label: '进行中',
          value: '进行中'
        },
        {
          label: '待执行',
          value: '待执行'
        },
        {
          label: '重跑中',
          value: '重跑中'
        }
      ],
      tableSyncWayOptions: [
        {
          label: '全量',
          value: '全量'
        },
        {
          label: '增量',
          value: '增量'
        }
      ],
      dialogVisible: false,
      sourceTimeSpendDialogVisible: false,
      tableTimeSpendDialogVisible: false,
      detailsDialogVisible: false,
      sourceTimeSpendData: '',
      tableTimeSpendData: '',
      selectedSourceId: '',
      tableDetail: '',
      sourceData: [
      ],
      tableData: [],
      multipleSelection: [],
    }
  },
  mounted() {
    if (this.$route.query.taskState) {
      this.sourceParamsForm.taskState = this.$route.query.taskState
    }

    if (
      this.$route.query.taskStateTable ||
      this.$route.query.taskStateTable === ''
    ) {
      this.dialogVisible = true
      this.tableParamsForm.taskState = this.$route.query.taskStateTable
      this.tableParamsForm.hotStandbyTime = [
        new Date(new Date().setHours(0, 0, 0, 0)),
        new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
      ]
      this.getTableData(false)
    }
    this.getSourceData()
  },
  methods: {
    getSourceData() {
      this.isSourceLoading = true
      const param = {
        current: this.sourceParamsForm.current,
        size: this.sourceParamsForm.size,
        sourceName: this.sourceParamsForm.sourceName,
        taskDate: this.sourceParamsForm.taskDate,
        taskState: this.sourceParamsForm.taskState,
        hotStandbyStaTime: this.sourceParamsForm.hotStandbyTime
          ? dateUtils.getDateStr(this.sourceParamsForm.hotStandbyTime[0])
          : '',
        hotStandbyEndTime: this.sourceParamsForm.hotStandbyTime
          ? dateUtils.getDateStr(this.sourceParamsForm.hotStandbyTime[1])
          : ''
      }
      logAnalysisApi.getHotStandbyLogSource(param)
        .then((res) => {
          this.sourceData = res.records
          this.sourceParamsFormtotal = res.total
        })
        .finally(() => {
          this.isSourceLoading = false
        })
    },
    resetSourceData() {
      this.sourceParamsForm = {
        ...this.sourceParamsForm,
        sourceName: '',
        taskDate: '',
        taskState: '',
        hotStandbyTime: [
          new Date(new Date().setHours(0, 0, 0, 0)),
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
        ],
        current: 1
      }
      this.getSourceData()
    },
    getTableData(showAll = true) {
      this.isTableLoading = true
      const param = {
        sourceId: this.selectedSourceId,
        current: this.tableParamsForm.current,
        size: this.tableParamsForm.size,
        dbTbName: this.tableParamsForm.dbTbName,
        taskState: this.tableParamsForm.taskState,
        syncWay: this.tableParamsForm.syncWay,
        hotStandbyStaTime: this.tableParamsForm.hotStandbyTime
          ? dateUtils.getDateStr(this.tableParamsForm.hotStandbyTime[0])
          : '',
        hotStandbyEndTime: this.tableParamsForm.hotStandbyTime
          ? dateUtils.getDateStr(this.tableParamsForm.hotStandbyTime[1])
          : ''
      }
      if (!showAll) {
        param.hotStandbyStaTime = dateUtils.getDateStr(
          new Date(new Date().setHours(0, 0, 0, 0))
        )
        param.hotStandbyEndTime = dateUtils.getDateStr(
          new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1)
        )
      }
      logAnalysisApi.getHotStandbyLogTable(param)
        .then((res) => {
          this.tableData = res.records
          this.tableParamsFormtotal = res.total
          console.log(res)
        })
        .finally(() => {
          this.isTableLoading = false
        })
    },
    resetTableData() {
      this.tableParamsForm = {
        ...this.tableParamsForm,
        dbTbName: '',
        taskState: '',
        syncWay: '',
        current: 1
      }
      this.getTableData()
    },
    getTableDetail(path) {
      const param = {
        logPath: path
      }
      logAnalysisApi.download(param).then((res) => {
        this.tableDetail = res
      })
    },
    // 分页
    handleSizeChange1(val) {
      this.sourceParamsForm.current = 1
      this.sourceParamsForm.size = val
      this.getSourceData()
    },
    // 分页
    handleCurrentChange1(val) {
      console.log(val)
      this.sourceParamsForm.current = val
      this.getSourceData()
    },
    // 分页
    handleSizeChange2(val) {
      this.tableParamsForm.current = 1
      this.tableParamsForm.size = val
      this.getTableData()
    },
    // 分页
    handleCurrentChange2(val) {
      this.tableParamsForm.current = val
      this.getTableData()
    },
    dialogVisibleclose() {
      this.dialogVisible = false
      this.tableParamsForm.hotStandbyTime = ''
      this.tableParamsForm.current = 1
    },
    TableDataSearch() {
      this.tableParamsForm.current = 1
      this.getTableData()
    },
    SourceDataSearch() {
      this.sourceParamsForm.current = 1
      this.getSourceData()
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    rerun(){
      if(this.multipleSelection.length>0){
          this.$notify({
            title: '成功',
            message: '重跑执行成功',
            type: 'success',
          })
        logAnalysisApi.sourceRerun(this.multipleSelection).then((res)=>{
          
        })
      }else{
        this.$notify.error({
          title: '错误',
          message: '请先选择要重跑的数据',
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
